I'll make this as short as I possible can.
I built a PWA. When clicking on the search icon it will slide to left - no problems.
I'm using a search feature which is containing "input search".
Every browser I have tested, the input group is not causing any issues for me.
When you go on safari on the other hand, you can click on the search icon the first time, and it will then display the search as normal. When you close it, no problems.. But click on it again, then close it again, you'll see that the website/viewport is pushed to the left. Test it on https://logima.io (on safari web browser) just to see the actual problem by hand.
I have tried relative, absolute, fixed and all sorts of box-sizing for different browsers.
I have spent 7 hours debugging the problem, and it definitely comes down to:
<input
ref="search"
id="search"
v-model="search"
#input="makeSearch"
class="search-panel-input"
:placeholder="$t('Type what you are looking for...')"
type="text"
autofocus="true"
>
But, it has nothing to do with the parameters which represents any styling or functions. It has solely to do with "input" itself.
I bought a brand new Macbook Air with 8GB Memory just 3 days ago and developer tools on safari is so slow I can not even use it at all, so I can't quickly debug the problem on developer tools there either which leads me here.
This can possibly be a result of another CSS code i've created causing this to clash. I am trying to figure out a way to make my viewport to not get pushed to left no matter what.
This is not the most critical issue as the search is displayed as I intend it to do on all browsers, on first time usage. But Safari is causing input to push viewport to left on second usage, and that is annoying yet an interesting issue to solve.
I will try myself to debug this styling issue but I'm reaching out here as I am positive there are some web designers more qualified than me to speak on styling in safari.
Any contributions to solving this issue is highly appreciated!
Oddly enough, it seems to be caused by the div(s) in your footer with class row.
So far, I've been able to address the issue by:
Setting margin-left/right to 0px (rather than -15px)
Disabling the values in Dev Tools
Removing the elements entirely from the DOM
(All done before opening the Search Panel)
Related
I have an html form in an iframe. In mobile safari, it's unbelievably fragile. Just focusing on an input will cause the whole frame to vanish. It seemed to be related to the automatic scrolling on entering an input, but I disabled this with a viewport tag, and I still have the problem. I've seen it come and go when a style had a height:100% rule, but now it's back to its bad old ways without the problem rule. The content is still there. Touching an invisible input will bring focus and the cursor, or pop the datepicker, but still invisible. Quick, someone, before I go nuts !
If this can be useful, I eventually traced this back to a loading animation implemented in css. Just the presence of the <div id="ajaxLoader"> in the page was enough to cause the instablility. Moral of the story: develop your mobile web apps with an iphone, because going back afterwards and making them work in safari may cost you your sanity.
I am the author of the PasswordCard web site. It has an image of a password card (a low tech way of generating passwords), which is supposed to be credit card sized, on it. The image is included on the page thusly:
<img src="/generatecard.do?number=756b9bb158f9564b&cookie=ok7q0sqrym26" style="width: 85.6mm; height: 53.98mm" alt="Picture of PasswordCard">
As you can see it has an absolute width and height in an attempt to show and print it at exactly credit card size. When I made this a couple of years ago, this worked; every browser printed it at exactly the right size. However now something appears to have changed. Both Firefox and Chrome now print this too large by something like 5% to 10%. Internet Explorer 8 still prints it at the correct size; I have not checked a newer version of IE and would not be surprised if IE11 or Edge also print it too large.
I can't figure out why this happens. I'm not setting any scaling options nor are any such options enabled in the printer settings. I have tried to research the problem but it's hard to google for. I haven't found any information about changes in CSS or something like that which would explain this. I have seen hints that Chrome's way of printing by rendering the page as a PDF first might cause problems like this, but it also occurs in Firefox, so it doesn't seem likely to be the problem. Also it usually causes things to be printed too small whereas in this case it is printed too large.
I'm in Europe so I'm printing on A4 paper.
My questions are:
What has changed in web browsers like Firefox and Chrome in the last couple of years that would explain this?
How can I force web browsers to print an image at a specific absolute size (disregarding any manual or explicit scaling by the user of course)?
Many thanks for any help you can give!
I don't know if this is a real issue since I am seeing it mostly when using an emulator, but it seems to be reproducible, and I noticed it on a friend's Android device. URL is:
Link To Page
On some devices, particular iPad Retina emulator, when you click on the hamburger it moves the body of the page to the right as expected, but the side menu area is completely blank, despite the fact that there are elements there and you can click on them, they just are not showing up, so they are being rendered but the whole sidebar is just blank (see picture)
I did discover a useful feature on the developer menu with Safari that I was not aware of. You can go to Develop -> Simulator and use the inspector for the page that is loaded in your simulator. Quite a nice feature, but still not able to quite figure out what the issue is.
It is using a Joomla! template and looking at the source seems like it could use a lot of tweaking because there are a ton of .css and .js resources, some of which probably are not needed and some which probably conflict with one another, some which are not needed on the front end, etc.
Help appreciated.
This kind of a fix:
body.jsn-menu-mobile-push-left {
margin-left: 0px;
}
but not ideal. It shows the menu in this case but it doesn't slide out the body to the right. That is a little strange since when the margin-left is set to 0px it doesn't display.
I currently have a WordPress theme online and appears to work fine but one of my clients noted that the blog page layout is broken in Google Chrome. The sidebar appears right underneath the page content. So I checked his website and my demo and it does indeed look broken. So I have spoken to another programmer and he says it's not broken and he uses the latest version of Chrome too. I have never encountered such an issue, it works for some but not for others.
EDIT: The issue has been fixed with thanks to Joseph Erickson.
Looks like it has to do with the width of the #sidebar. If you shrink it just a little bit, it'll fit properly.
Why is this happening? Who knows. These little pixel shifts with floats can be hard to track down. I would recommend not trying to fit everything so snug together and allow some wiggle room when putting two fixed-width floating elements inside the same element.
I created a simple page with a series of divs. In all of the modern browsers, it appears fine, but in Internet Explorer 6, it falls apart. I have no idea what is causing it to happen.
You can view the page here: IE 6 Test Page
If you have IE6 installed, I included the Firebug Lite JS file on the page, so just click the firebug icon in the bottom right corner to inspect an element.
Here's a screenshot using Browserlab to view the page in Firefox and IE6: Comparison Screenshot
The 3rd div named 'content'(With the Manager Email field) moves everything to the right forcing the next div to the next line. Also, none of the row div's reach all the way across as they should(see Comparison Screenshot)
I did some research and have found that there is some problems in IE6 using floats which I use here, but I'm not sure how to fix it.
Why does my page not display correctly in Internet Explorer 6? And better yet, how can I fix it? :)
It looks like the third div isn't clearing the float properly. Perhaps give each of the row divs the style clear: both
Do you really need to support IE6? Even Microsoft is fighting it nowadays and the market share is starting to be irrelevant except for China.
There's a difference between "not working in IE6" and "not looking perfect in IE6".
As has already been said, IE6's market share is low and continuing to fall -- it's below 2% in most of the developed world (see http://gs.statcounter.com/ for country-by-country stats).
Given those stats, I would say that if the page is usable in IE6 then your work is done. IE6 users are by now used to web pages looking bad. Many popular sites don't work at all in their browser, so one with a few layout glitches won't phase them at all. They'll still use the site.
If it is actually broken to the point of not being usable then it's a different story; in that case, you'd need to consider how important those few IE6 users are to you vs the time it'll take to do the work, and fix it accordingly, but that doesn't seen to be case here: the page seems to work. It looks a bit naff, but it works.