I have a web application running on internet explorer 6 mobile, and I've noticed that the rendering of scroll bars is inconsistent. For example, if you take a regular html select (with lots of entries) and expand it, the scroll bar renders in a slim, black-colored way, but if you have an overflowing div, you get a wide, old windows-style scroll. Do you know of a way to force the rendering to the select-style one? (screenshots follow)
Related
this website: http://mr-chemie.dev-pixalla.de has a scrolling issue on mobile phones and tablets. When scrolling in one direction, everything is working perfectly fine, but as soon as you change the scrolling direction you got to scroll twice. I noticed that when scrolling up after scrolling down, the vertical scroll bar on the right expands out to full height for a moment. When scrolling up the second time everything works fine.
I'm using Elementor page builder for Wordpress and got some knowledge with CSS. The problem did not occur on any other website I created. I just do not know any kind of property to solve my issue, neither did I encounter similar questions when searching for it on the internet.
Thank you very much for your help!
I had the same problem. It was caused by shape bottom divider turned on (Elementor, waves divider). The top one works fine. But when bottom is enabled - then the strange behaviour on mobile happens.
I have an app that renders CN1 LightWeight picker properly on low-res devices, namely some low-end Android devices but getting weird behavior on iPhone 7 plus upward, even on the simulated version.
I have tried styling the Spinner3DRow in GUI Builder but this doesn't fix the issue.
When the Spinner is pressed to spin, the text and the middle borders disappear and re-appear after releasing (sometimes). See the image below for reference:
December and lines are missing.
The app is also newly published in store and could be downloaded on the iPhone 7 plus upward for reference here.
How do I style these lines and the text to always remain visible regardless of the device resolution and keep the behavior consistent?
Edit:
On testing again, the issue is occurring even on low-res devices.
I'm using the Google Translate widget ( http://translate.google.com/manager/website/ ) on my website. It works fine on the desktop screen, but it uses the exact same layout on mobile and other small screens, and looks terrible. For one thing, the iframe containing the list of languages has a hard-coded width of 860 pixels. You can't select any languages beyond the 3rd column because they're off the edge of the screen (and you can't scroll to the right to see them because the browser doesn't realize that the iframe is too wide -- I assume it's the same problem as discussed here: Webpage with wide iframe is not scrollable on an iPhone with viewport ).
I've looked into fixing the problem using CSS, but CSS can't "see" inside iframes. I've searched all over stackoverflow and the rest of the internet, and not only have I not found a solution, I haven't been able to find anyone else complaining about the problem. I can't be the only one, can I?
I found a solution: Instead of "Dropdown only" layout, I chose "Horizontal". When you do that, Google uses a simple drop-down list instead of a big iframe.
The little panel that appear at the top of the page is still too wide to display properly, however, but that's a minor issue.
http://54.200.76.33:8080/
I've got this working on desktop browsers.If you scroll down, you'll see a search bar shows up at the bottom of the screen and becomes fixed to the bottom.
If you look at this on a mobile phone, when you scroll down, the bar doesn't immediately stick to the bottom. It'll wait until the user stops scrolling, and then it becomes fixed to the bottom.
Is there any way to fix this? Thanks.
Different mobile browsers have all kinds of issues with firing scroll events. Seems like you're using a scroll listener to update the CSS for pinning the scrollbar to the bottom. It's a generally good approach, so I wouldn't change it.
If you like, you can use a tool like Modernizr to treat the mobile platform differently. Other than that, the state of technology today is that you kind of have to deal with quirks like this on mobile.
http://modernizr.com/
I'm retro-fitting a website for Mobile First Responsive Design (MFRD). My question is - how far do you go with the "Mobile First" part?.
For example - on the homepage I plan on having a list of upcoming events, say 4 or 5. On the mobile version I thought 2 would be enough to save screen real-estate. Should I load the other events in dynamically for the larger views, or should I just hide them since it will only be a few elements anyway?
Loading them dynamically for larger sizes means I have to attach an event to the window resize which typically gets fired every pixel. Even though I can offset that with Timeout, that's still a lot of client side checking is it not (even though it's not like users are constantly resizing their browsers).
I mean, even though you're designing for mobile first, you also have to consider the larger sizes right? Obviously larger JavaScript libraries and other assets that are needed for larger only you want to pull in later and not load for mobile - but how crazy do you want to get with the bandwidth saving?
What is the target market for the website? Are you making a completely responsive website that encapsulates smartphone to desktop? Or are you just concentrating on smartphone to tablet?
Mobile First really just means start your styling and content views at the smallest form factor and work up as the device dimensions get bigger. HTML, CSS (media queries) and jQuery all play a part to expand the UI and manipulate (show/hide) content elements as the browser gets bigger.
Take a look at Smashing Magazine, their responsive layout is one of the most extensive I have seen so far, it will give you an idea of how far you can take the MFRD or DARL (Device Agnostic Responsive Layout) methodologies.