Fixed HTML5 uploader can cause page to become scrollable on some narrow displays

CTXMedia

CTXMedia

Well-known member
A couple of members have reported issues since I rolled-out the latest update - I'll copy the support thread opener here for reference:

https://www.cyclechat.net/threads/screen-moving-around-on-mobile.212840/

CCs always been really good at resizing to my phone, but lately (since the latest update?) I seem to be able to move the screen off to the side, like this:
screenshots_2017-01-18-22-42-55-png.333956

Which is a bit annoying when scrolling through threads. It doesn't happen on forum lists or on locked threads so possibly it's something to do with the reply box? I can't do it now as I create this thread.

Samsung Galaxy Note II / Android / Chrome
Click to expand...

Chrome version 50.0.2661.89 running on Android 4.4.2

I've cleared the Cloudflare cache and the member has cleared their browser cache, and also changed to the default style (they use a darker shaded one) and the problem still exists.

Has anyone else had their members report screen issues on their phones since the latest update?

Any ideas as to what may be causing this?

Cheers,
Shaun
 
The only thing that has changed in this area is the HTML5 upload button, and I can only reproduce it in threads while logged in, and only on really narrow devices (I can reproduce it on my iPod Touch running iOS 9, though annoyingly I can't get the element inspector to work).

Could you disable the HTML5 uploader in the Admin CP and reply back, if the issue goes away then it's likely related to that (possibly related to a hidden element that gets created).
 
I think this might be specific to the buttons wrapping, which appears to happen (in English) at 327px. It looks like adding overflow: hidden to the dynamically inserted file input works around it here (in Chrome). More testing would be needed.

That said, the Galaxy Node 2 CSS resolution is 360px wide, so it shouldn't be that unless there are CSS changes to make the buttons wider on your site. Conversely, it's also a somewhat outdated version of Chrome, so it might be that.
 
Just testing in Chrome and if I reduce the min-width of the buttons in form.css down from 100px to 90px it seems to go away:

Code: 
    .submitUnit .button
   {
      min-width: 100px;
       *min-width: 0;
   }

upload_2017-1-19_12-38-9.webp

Code: 
    .submitUnit .button
   {
      min-width: 90px;
       *min-width: 0;
   }

upload_2017-1-19_12-38-47.webp

So it seems to be related to the buttons wrapping, but I just can't figure out why it is behaving like that because the buttons seem to behave as expected and wrap-around to the next line. Odd. :coffee:
 
It's caused by an input[type=file] element that's added by the uploader system. It is set to 1px by 1px but it appears to be allocating more space than that.

I can see in your style that you have an extra wrapper around the QR form, which is reducing the available width, so that's quite likely why it's happening with a 360px wide device.
 
Mike said:
I can see in your style that you have an extra wrapper around the QR form, which is reducing the available width, so that's quite likely why it's happening with a 360px wide device.
Click to expand...
I do - it's around all the posts and QR form; I'd forgotten about it and only realised what you meant when I enabled and disabled the default theme.

Any advice on how to resolve it (other than narrowing the buttons max-width to stop them wrapping - which is fine, we can live with that ;))?

Cheers,
Shaun :D
 
Mike said:
I think this might be specific to the buttons wrapping, which appears to happen (in English) at 327px. It looks like adding overflow: hidden to the dynamically inserted file input works around it here (in Chrome). More testing would be needed.
Click to expand...
I've just found this on the page but whereabouts would I add the overflow: hidden; please Mike? I can't seem to find it using the ACP template search.

upload_2017-1-19_13-27-28.webp

Thanks,
Shaun
 
This is fixed for the next release now. The full fix is a bit different as the overflow hidden fix doesn't work in IE/Edge, though that will be a very uncommon issue (at best). The CSS workaround above should work for the common cases though.
 
Back
Top Bottom