The webpage which I am currently front end coding is https://www.softpaz.com/software/download-jetbrains-webstorm-windows-180745.htm
Issue is that the
1) sidebar sometimes gets transparent
2) div background are blank, then suddenly appear and then go blank again.
3) The buy links table has flickering borders
4) Most of the small icons are flickering
These things happen when scrolling in Microsoft Edge, and IE11. Have tested the same webpage in chrome and firefox, and its working without any issues.
I have tried:
http://ieflicker.com/
tried removing the background, removing box shadows, text shadows, disable rounded corners and put everything at 100% opacity, but it still happens.
When the page is small, that is, there are less number of elements on the page, like the about us page of softpaz(link on top top right) then everything display fine.
Am confused on what to do now!?
I figured it out! Posting it if someone is facing the same problem. My system has the Intel HD3000 and running on Windows 10, which means that there was limited hardware acceleration support(as there are no official drivers from Intel). The page runs fine on other systems.
Once again, I see that Firefox, Chrome, Opera, etc outshine IE/Edge on the same system!
Related
I have a site (http://www.iproconnect.com.au/) that for one user (that I know of) renders the home page with black areas in Firefox. These do not seem to be tied to CSS, as if I force a re-draw of an affected area (e.g. by scrolling areas in and out of the viewport) it sometimes renders correctly, and sometimes incorrectly but differently to the previous incorrectly. Also if I do this with the inspector open, no CSS seems to change, and hovering background URLs show the image downloaded correctly.
I can't reproduce this in other installations of Firefox (all running the same version - fully up to date). And this user has un-installed and re-installed with no change in behavior.
I don't even know how to debug this further, let alone how to solve. Any ideas greatly appreciated.
I have a Issue. I'm currently working on a site but decided to not really pay attetion to IE since its an one page site and we have a selected audiance so we decided IE isnt a main priority.
Now I was doing some testing in ie 11 just for fun and everything seems to work pretty well. I only have 1 problem with the fixed background.
Whenever I try to scroll it shakes instead of just staying on its place. (so it is fixed but it still shakes up and down a few pixels when scrolling)
I also have a menu at the top which use scrolltop to scroll to the right div when clicking a menu item and when you use this the background image dont shake and behaves like it should be.
For anyone having windows 8 and ie 11 this is the link: http://www.randomshirts.nl/letterfabriek9/
UPDATE: when I test it on my normal computer ie11 its working fine. it seems to be a problem with the touchscreen laptop
Try saving the background image in .jpg and try lowering the pixels and also make it sure that your IE is fully updated.
I am working with Foundation 4 plus WP and came across a very interesting issue and this is not a UTF-8 issue.
Page rendering in Chrome:
http://www.nmjgraphics.com/imaging/chrome_ren.jpg
Page rendering in Firefox (IE 10 loads the same way):
http://www.nmjgraphics.com/imaging/ff_ren.jpg
In both FF and IE the top navigation renders perfect out of the box, but in chrome it is bumped down by 30px. Now I can apply a margin of -1.9% 0% 0% 24.5% and that gets the menu back to where is "should" be on the browser, but IE and FF shift the menu by -1.9% and that cuts the navigation in half. In addition to that I also tried using the top element setting at 100% initially and then using "inspect element" in chrome move the number down to 0 with no effect at all.
This has not been tested on Opera or Safari, but my assumption is they will render just like FF and IE.
I do apologize for the links instead of images, but I need 10 rep just to add images to the question and I can only post two links, but I did have a total of 3 images showing the rendering on the three browsers. If you want to see the ie rendering, just change the browser name to ie_ren.jpg.
solved it. I was pulling my hair out for nothing. Page renders fine if I am not logged in. I completely forgot about the bar. I figured that if I wasn't placing it in the theme it wouldn't show up at all. Learned something new there. I will either add the bar (which I should) or disable it all together.
I am running into a random issue in a website that I am working. This website contains many images and some images are 1Mb in size or bigger. The site also uses some CSS3 tricks, like 3D rotations.
Since I added this 3D CSS stuff, I noticed a problem in Google Chrome where some random areas in the website are not rendered.
This is a screen-shoot of how the site should be rendered, the green lines are because I've enabled the "Composited render layer borders" on chrome://flags:
And this is how it get rendered when the issue happens:
This white squares appear randomly and they can disappear or reappear in another place if the scroll the website. I also noticed that this problem is more common in lower-end computers so I my guess is that somehow Chrome is running out of GPU memory.
Why this problem happens? and is the any workaround for it (besides disabling the 3d CSS)?
In case it helps, this is the website:
http://colocation.cubo.cc/cheetos/masterbrand/
Update:
I raised a issue for the Chrome team.
I couldn't reproduce this problem in the Chrome Canary.
It was a Chrome Issue, and its fixed now:
http://code.google.com/p/chromium/issues/detail?id=121779
I can only congratulate the Chrome team for pushing bugfixes so fast, I wish IE was like this.
I have a site that works fine in android browser, FF, Chrome, Safari IE9+ but in IE8 the upper half of an elements background disapears as well as the background color on a couple of input elements.
I have run through IE debugging tools and also W3C and there is nothing that is coming up that would make this occur.
The site in question is http://ukritic.com if anyone can check it in FF then IE8 and maybe suggest what could be causing the problem it would be greatly appreciated.
If you need anything from me let me know and I will post it up for you.
ADDITION:
The problem that is occurring is that in IE8 the white background containing the content is only visible 1/2 way down the page but is hidden on the upper half of the page and also hidden where the facebook like box is located.
In all other browsers the entire content container shows the #FFF background from the top of the page to the bottom of the page.
We have tested in IE compatibility and normal mode but the problem persists.
What I do notice is that while the page is loading the content container is white but as soon as the page loads completely it disappears on the top half and the facebook container.
Thanks
~M
The problem was in the border-radius.htc file as soon as I removed that call the page rendered perfectly.
There really is no effective way of rendering round corners on ie8 as the .htc file needs a relative path to the page that is rendered which does not really work well with dynamic depth address bars (shortUrls).
Guess I will have to settle for rounded corners only in IE9+ and all other browsers.
Thanks for the input