I'm not sure why, but it works across every other internet platform.
First Pic is of button in IE, Second is code, third is button in Chrome.
Link to webpage
I can't post a comment because of my low reputation so here we go.
Did you open this page in IE prior to adding this style? In my experience, IE has a very aggressive caching policy and will often not reload css files and such.
Related
I'm using Font Awesome 5 Free via a kit. On desktop, the icons work perfectly. But on mobile (iOS chrome (normal and incognito), iOS firefox focus, iOS safari), they behave like Schrödinger's cats...
On first page load, the icons appear. Tap reload and they disappear and are replaced by small squares. Tap reload again and they reappear. Every other tap of reload shows or hides the icons.
I notice the same behavior if I toggle back and forth between "request desktop site" and "request mobile site". (I'm not sure what's really going on under the hood there since the page renders the same either way.)
Since they do appear correctly, at least part of the time, I don't think it's a cross-origin problem or a caching problem.
An example page is here: https://onlinesafetyzone.com/learn/learning-zone.php
I've read many posts, here and on GitHub and none of the solutions has worked. Anyone have a clue what's going on?
It seems you have somekind of a XSS issue. I would try to download the fontawsome resources and deploy them with the application. Can be that they have a CDN problem, every second time the fonts break :| so maybe one of the nodes is flipping.
The HTML and CSS are rather large so I can't pinpoint the issue or post a good example. When I toggle through my UI, the css styling seems to break, the most jarring of which is that the background changes to grey. I was wondering if anyone encountered similar issues. Here are some of the conditions for me.
-Chrome: Firefox & Safari working fine
-Small Screen: Problem doesn't occur on larger monitors
-Toggling developer console on and off fixes the issue
It's difficult to try and pinpoint the issue without seeing some code or even a fiddle, but when you open the inspector the page is resizing, and so redrawing (at least some of) the elements. It's also possible that there's a cache issue - I believe by default when you open the inspector the cache is disabled and so all css and scripts are downloaded again. That said, if you aren't refreshing the page it with the inspector open its unlikely to be that.
My money would be on the window effectively resizing when you open the inspector, and so some (if not all) elements are forced the redraw and thus re-evelauate their styles.
Maybe you could use Chrome's timeline to check what is being painted as time goes by. Try running that and opening the inspector while its active to try and see whats going on.
Looks like a long standing bug (years) with webkit:
How can I force WebKit to redraw/repaint to propagate style changes?
The solution that appeals to me is:
$('#body').hide().show(0); from Force DOM redraw/refresh on Chrome/Mac
to force a redraw.
So I was using Chrome and IE together when all of a sudden Chrome decides to change its zoom level not only for the webpage, but the entire browser. I'm not sure if it happened when I restarted Chrome or if it happened when I decided to bring it to the front. So basically, all menu items, logos, icons, absolutely everything appears to have been zoomed in slightly. I have restored to original settings, disabled extensions (I don't use any extensions anyways), uninstalled and reinstalled, and nothing.
I've used the DPI settings in the properties of the Chrome application and nothing changes it. I've changed scaling in Windows and nothing helps.
Everything is larger in Chrome now and it's driving me crazy. Many menu items won't appear fully because of this. Note that this isn't just at the webpage level but at the entire browser level. I've included some images so you can compare. If you look at the youtube homepage, you'll see that everything is larger in Chrome than it is in Internet Explorer.
Scratch that apparently I need reputation in order to post pictures, ugh. If I can get 10 rep soon I'll post some pics.
I'm sorry if my description is rather vague but this isn't something I could search up. No other programs (including IE) are having this issue. THanks very much in advance if anyone can help. This is just driving me crazy.
No, Ctrl + 0 obviously does not work. This is an issue with the program as the entire program looks zoomed in. Everything, not just the webpage.
Found a "quick fix" solution from post #38 here:
Right click on the Chrome link on your desktop
Choose Properties and then add " /high-dpi-support=1 /force-device-scale-factor=1" to the existing Link to your path to chrome.exe.
Hope this works permanently. What a hassle.
If you're experiencing a "zoomed in" browser it's because you have an updated version of Chrome. Chrome and FireFox now adjusts the page zoom level according to your Windows settings to better support high DPI displays. For example, if Windows is set to 125% font size (120dpi), the content area will be zoomed by 25%. This is usually the default setting on your computer.
This means that your updated Chrome and/or FireFox browser will automatically set websites to 125%, and all other browsers remain at 100%.
What are possible solutions?
As of this writing, their isn't a known method of fixing this from a web coding standpoint, due to that it's created from the inner workings of the browser. That being said, their are still some things you can do from the "users" side to fix this:
The quickest way around this is to open up your browser and press on your keyboard "ctrl -" (control minus) twice. This will set your website content to 75%, which would be equivalent to 100% in all other browsers (but this will just fix the website content).
You can set your computers font-size settings in your control panel to "100%". This will make all of your computer fonts smaller.
I'm sure their is a better answer to this, but for now these are the 2 options that I'm seeing. In FireFox version 22 they also added this feature (as mentioned above), you can see the work around for FireFox here: https://support.mozilla.org/en-US/questions/962979
I'm sure a similar solution also exist with Chrome.
You can change your windows default zoom to 100% in display settings and make everything almost unreadable, or (a better way)
You can add a start parameter to your chrome shortcut:
"your-chrome-dir\chrome.exe" /high-dpi-support=1 /force-device-scale-factor=1
I know, it's too late, but just in case someone else has this problem...
I am a web developer for a small company and we recently noticed a strange graphical issue with our website that only appears for users using Google chrome on windows 7 and 8.
The graphical issue occurs when our banner images fade in and fade out, all of the content below the navigation UI flashes white.
This issue is resolved if chrome is run in windows 8 mode though not if hardware acceleration is disabled.
Weirdly enough something else that fixes the bug is opening the developer tools window by inspecting an element, very unusual.
Is there any kind of fix I may have to add to the pages CSS similar to styling specifically for Internet Explorer?
Try to move the following script include right down to the bottom of your page, right above the last </body> tag.
<script type="text/javascript" src="http://ecogrid.co.uk/js/magentothem/bannersequence/jquery.sequence-min.js"></script>
It works for me, at least in the browser. I think the issue was related to the order of the code and perhaps the conflicting of jquery fade effects in the menu and the sequential slider.
This is non related but... good practice. Whilst your at it you may want to move many other 'render blocking elements' down below the fold as well, this is better for load time optimization. But of course for more info see: https://developers.google.com/speed/docs/insights/BlockingJS
I'm in the process of creating a website.
This website works great in Chrome (10), FF (3.6.13), however only half of it works in IE (8). Now, I'm aware of some of the issues between browsers, but this one has me stumped. Because half of the script is working (displaying properly) -- the other half does not.
A live version of the website may be found here
Additional information:
I am using the html5 doctype, <!DOCTYPE html>
I have validated my site with HTML5 as well as HTML4.01 STRICT
EDIT
At the request of Zabba, here is what SHOULD be happening:
I am externally loading content from other sources into my website.
My menu(s) and the text. In Chrome, and FF the menus, and the content are loaded and displayed. In IE, the menus are NOT loaded bu the content is. Funny enough, the logo also stops loading in IE.
EDIT
The problem has been narrowed down to a CSS issue, thank you!
The issue is in your CSS, not your JavaScript. Try these suggestions:
Remove your filter:alpha(opacity=80) from the #body block in your CSS.
Set z-index values of >5 on the missing items, since you have z-index:5 on #body. Or remove the z-index from #body.