Mobile Webkit Reflow Issue

Mobile Webkit reflow issue

The answer that actually solved my particular issue was a variation of a solution found in one of @Paul Sweatte's links:

Essentially, a plain div which is taller than the body is added. When it is removed, it causes the body to effectively scroll or reflow. Setting the delay to 0ms between adding/removing is enough to allow the DOM to recalculate without causing any flickering. This was the minimal script I could find which fully solved the problem for all position:fixed elements on my particular instance of this issue.

var hack = document.createElement("div");
hack.style.height = "101%";
document.body.appendChild(hack);
setTimeout(function(){
    document.body.removeChild(hack);
    hack = null;
}, 0);

How can I force WebKit to redraw/repaint to propagate style changes?

I found some complicated suggestions and many simple ones that didn’t work, but a comment to one of them by Vasil Dinkov provided a simple solution to force a redraw/repaint that works just fine:

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

I’ll let someone else comment if it works for styles other than “block”.

Thanks, Vasil!

CSS3 100vh not constant in mobile browser

Unfortunately this is intentional…

This is a well know issue (at least in safari mobile), which is intentional, as it prevents other problems. Benjamin Poulain replied to a webkit bug:

This is completely intentional. It took quite a bit of work on our part to achieve this effect. :)
The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS).
It is hard to show you the “looks like shit” part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting.
Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size.
From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.

Nicolas Hoizey has researched this quite a bit: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

No fix planned

At this point, there is not much you can do except refrain from using viewport height on mobile devices. Chrome changed to this as well in 2016:

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
https://developers.google.com/web/updates/2016/12/url-bar-resizing

Mobile Safari Reflow without Resize - buggy behavior

Got a breakthrough. After dozens of variations in the media queries, this code has 'broken' the problem:

function orientation_change() {
    if (window.orientation == 0 || window.orientation == 180)
        document.getElementById("viewport").setAttribute("content", "width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no");
    else if (window.orientation == -90 || window.orientation == 90)
        document.getElementById("viewport").setAttribute("content", "width=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no");     
}

with:

<body onload="orientation_change();" onorientationchange="orientation_change();">

The media queries of the original question are still included to reflow the text when a rotation occurs. However the refresh partial black screen issue is gone. Found insight on Apple iOS Safari Web Content Guide. In particular, Handling Orientation Events.

I hope this helps in the process of Responsive Web Design.

Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?

Mobile Safari (like Chrome for Android, Mobile Firefox and IE Mobile) increases the font size of wide blocks (at all times), such that if you double-tap to zoom in on that block (which fits the block to the screen width), the text will be legible. If you set -webkit-text-size-adjust: 100% (or none), it won't be able to do this, and so when a user double-taps to zoom in on wide blocks the text will be illegibly small; users will be able to read it if they pinch-zoom in, but then the text will be wider than the screen and they'll have to pan horizontally to read each line of text!

Ideally you would fix this by using Responsive Web Design techniques to make your design adapt to mobile screen sizes (in which case you would no longer have any very wide blocks, so mobile browsers would no longer adjust your font sizes).
If that's not an option, and you're stuck serving a desktop site to mobile users, then see if you can tweak your design so none of your blocks of text are wider than the mobile device's device-width (e.g. 320px for many portrait phones) (you can use mobile-specific css to avoid affecting desktop browsers), then Mobile Safari won't need to increase any font sizes (and browsers which reflow text, like the Android Browser and Opera Mobile, also won't need to change your layout).
Finally if you really need to prevent Mobile Safari from adjusting your font sizes you can set -webkit-text-size-adjust: 100%, but do this only as a last resort since it is likely to cause mobile users to have difficulty reading your text, as it'll either be too small or they'll have to pan from side to side after every line they read. Note that you must use 100% not none because none has nasty side-effects in desktop browsers. There are also equivalent -moz-text-size-adjust and -ms-text-size-adjust properties for Mobile Firefox and IE Mobile.

Edit: for example in your case the simplest is probably the 2nd alternative, so you could try adding the following CSS:

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
    table#all_results {
        width: auto;
    }
    td#main_box {
        width: 320px;
    }
    td#side_box {
        width: 320px;
    }
}

Though it's not ideal to hardcode 320px like this; you could improve on that by using a variety of CSS media queries, or getting the device-width from JavaScript.

CSS Ripple effect with pseudo-element causing reflow

The problem seems to be related to this chromium bug that was supposedly solved a few years ago: Image moves on hover when changing filter in chrome

Setting transform: translate3d(0,0,0); looks like a fix, though my eye isn't pixel-perfect.

Mobile Webkit Reflow Issue