search

chenhuanle / html5rocks

Automatically exported from code.google.com/p/html5rocks
0 stars 0 forks source link

Slides are letter boxed and not scrollable when viewed in landscape orientation on a phone #682

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago 
Please describe the issue:

The slides on slides.html5rocks.com are centered, but not vertically 
scrollable. This causes a letterboxing effect when viewing on devices with low 
vertical resolution (e.g. a phone in landscape mode) - the top and bottom of 
the slides are chopped off.

Please provide any additional information below.

It is also possible to see this problem on desktop browser if one reduces the 
height of the window to < 600px (screenshot attached)

Original issue reported on code.google.com by jknot...@google.com on 17 Oct 2011 at 4:40

Attachments:

GoogleCodeExporter commented 8 years ago 
This happens because slide divs have the following combination of CSS rules 
applied:

position: absolute;
left: 50%;
top: 50%;
overflow: hidden;
width: 900px;
height: 700px;
margin-left: -450px;
margin-top: -350px;

Such CSS styles are an easy way to vertically and horizontally center elements, 
but a known side effect is that content gets cut off when the content is taller 
than the screen. There are other ways of centering elements that do not suffer 
from this flaw.

Original comment by johnme@chromium.org on 17 Oct 2011 at 5:22

GoogleCodeExporter commented 8 years ago

Original comment by ericbide...@html5rocks.com on 18 Oct 2011 at 7:15

GoogleCodeExporter commented 8 years ago 
Fixed in Revision c964defed412.

Original comment by han...@google.com on 6 Mar 2012 at 10:30

GoogleCodeExporter commented 8 years ago

Original comment by han...@google.com on 6 Mar 2012 at 11:11