Skip to main content

{position:fixed} in iOS 6

I stumbled upon this oddity when upgrading to iOS 6 while working on a mobile advertising project, and it took me a better part of the day to figure out what is going on: all of a sudden an element {position:fixed} stopped working in a correct manner (which is staying put, while the page is scrolling), and started "sticking" to the scrolling page, moving out of the viewport, and then just "jumping" back to the correct location after the scrolling was finished.If you scroll this page, you will see it—hint: that's the one labeled "broken"—assuming that you have a correct device/browser combination. Mine was iPhone4 and iOS 6.0 (6.0.1-6.1.3 behaves just the same). On the original page, where I first encountered the problem, all of my elements were created dynamically using JavaScript, but at the end of the day (literally) it become clear, that the glitch is in the iOS 6 CSS implementation.Here is what happens: if you have an element {position:fixed} which has one child element {position:absolute}, the correct behavior will break, if parent element has no physical dimensions. In my case, the width of the element was omitted, and the height was set to 0px, but it breaks all the same, if they are just not specified.

Fix

Give parent element physical dimensions. Almost anything will work, including specifying, of course, width/height (duh), border (even transparent one, but at least 1px wide), or adding a child element which is not positioned absolutely.

Another fix

Applying an outline to ANYTHING on the page, fixes the bug for all elements.
Labels:

Popular posts from this blog

WordPress: How to add custom fonts to a twenty seventeen child theme.

Quick help to those who have tried to find some help and failed (as I have so I have to write the code myself). Assuming that you have your virgin child theme configured and activated: here is a function which goes into the functions.php file (of your configured and activated child theme): function childtheme_twentyseventeen_fonts_url() { $replace_original_font = true; // unless you really like Libre Franklin if ($replace_original_font !== true) { $hyph = '-custom-'; } else { $hyph = '-'; }; $font_families = array( //add your Google fonts and weights (400 and 700 are defaults for normal and bold) here: 'Oswald:200,400,700', 'Lato:200,400,700', ); $query_args = array( 'family' => urlencode( implode( '|', $font_families ) ), 'subset' => urlencode( 'latin,latin-ext' ), ); $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' ); wp_enqueue_style( 'twentyseventeen' ....
Read more

How to Make a Website Everyone Has

Read more

I Beg To Differ (On "Casino Royale")

The first page of hits Google returns if you run a search on "casino royale film review" are all basically the same. Everybody agrees that it's the best Bond movie ever made and Daniel Craig is the best Bond ever. I beg to differ. I may not be a true 007 fan, I must admit, although I have seen all of them, and some more than once (I do not consider myself a true fan just because I don't remember what many of them were called, and who played Bond in which particular one). I do, however, have a very clear idea, why I like those movies. Because they provide the very best brainless entertainment the movie of this genre can provide. Well, they used to. They had an enchantingly evil villain, many bad guys of different calibers, tons of cool gadgets, beautiful girls, world-scale crisis and, of course, indestructible, classy and cool main character. There would be a half an hour of the "character introduction" proving time and again, that 007 is the coolest, classie...
Read more