I have a Google Chrome problem on macOS Sierra: Image: SVG rendering bug
As you can see in the image above, the SVG background images in the stackoverflow answering section are not rendered correctly. That also applies for the stackoverflow logo and for any other SVG background images.
I solved the problem temporary by deinstall and install Chrome again. The next day I had the same problem. Chrome is up to date on version 56.0.2924.87 (64-bit).
I also have the issue that if I hover over an DOM element in the 'Elements' tab in dev-tools, the element is not highlighted on the page. This was also gone after reinstalling but also appeared the next day again.
Any ideas about these issues?
Related
I recently had problems with displaying SVG files in Firefox, but I overcame that by explicitly stating the width and height in the .svg file source. That fixed the problem for me on my Firefox, but some users still report problems on some versions. Are you able to reproduce the problem? What might be the solution? This is the website: http://naratifrevue.cz – it's using a glitch script on SVG images in the header.
I am using Chrome on OSX and have encountered an infuriating bug which makes JSFiddle unusable:
As the screenshot shows the CSS and Result text areas are squeezed off the screen with no handle to pull them back. How can I make them visible and usable?
It hasn't always rendered like this, but I'm not sure what has caused it.
What I've tried
Disabling all chrome extensions
Resizing the browser to a ridiculous width
Clearing local, session and cookie storage for JSFiddle on Chrome
Removing secondary screens
Changing my screen resolution
None of which have changed anything.
Update
The bug is not replicated when using safari.
I have a problem with SVG renderring in Firefox. Whilst it works in Safari, Chrome or even in IE, it doesn't work in Firefox. Inspecting the element it seems that the layers are there, but only background is visible as if it's z-index is higher than the z-index of the others.
Rendered in Firefox:
SVG logo in Firefox
Link to the original source file: SVG File
Thanks for your help.
PS: I used Sketch 3 to export the svg. If it helps somehow.
You're experiencing bug 995813.
I fixed this bug some time ago but that change is still making its way through the release process so your example will display correctly from Firefox 31 onwards which will be released on 22 July 2014.
In the meantime if you move the fill="white" from the <mask> element to the child <use> element this will work around the Firefox bug.
I am not able to view HTML/CSS within the HTML panel.It is covered by some grey block. I reinstalled Firefox and Firebug but the issue still persists. Can anyone guide me how I can remove this grey block?
As described in the FAQ to Firebug this is not a bug in Firebug, but known to be caused by the following extensions:
Lazarus: Form Recovery 2.3 (seems to be fixed in version 3.2)
Pentadactyl
Zotero
I've run into this issue before without ever really figuring out what the problem was, but I'm attempting to do the standard "drop-shadow" effect by using an image border on the main content of my page. The content portion has a blue background (#3366ff) so the border image has one pixel of that color before the "drop-shadow". Everything works great in Chrome (Windows & Mac), Safari (Mac), IE8 and Firefox (Mac) but it falls apart on Firefox for Windows. The images are below, but instead of rendering the #3366ff color, Firefox renders #4e50fb. Thoughts? Could this be a color profile issue? And if so, how would I go about fixing it?
Thanks!
Bad Rendering:
Good Rendering: