Seeing a weird issue where opening one page will load our network graph with filled circles of images, but jumping to another page will not display the circles. MOF two observations have been made:
Issue does not exist with Safari but only Chrome
Removing the image fill results in the circle being drawn
I've tried old and new versions of d3 v5, v6, v7. It's hard to test on jsfiddle because this is related to page changes inside Salesforce
The issue is not cache related as I've turned off cache and can see the images being downloaded in Chrome Dev Tools. Generally a refresh will fix the issue.
Good Render
Bad Render
Related
I use the Facebook Open Graph to publish URLs from a website to their corresponding Facebook Page. The main image is specified using the Open Graph tag og:image. Sometimes the images show up on Facebook as a very zoomed-in, and granular/pixelated. Upon further examination, the images which do poorly appear to have been rotated (I noticed this because a Lightbox plugin I use isn't correctly rotating them, but all other software: browser, Mac Preview, Facebook are).
An example page from the site with the problem (click to zoom and see the orientation issue in that 3rd party library but that's another matter). This issue I'm trying to resolve on Facebook can be seen by using the Facebook Debugger against this page. (As a side-note, it's oriented correctly).
At first I thought I could perhaps fix this with og:image:width and og:image:height, but it had no effect (it did fix a different the pre-caching/crawling issue).
Note that providing the raw image URL directly into the Debugger works fine; the problem is only when providing this URL via the Open Graph tags.
My one workaround idea is to use my image processing library (sorl-thumbnail) to produce a version of the image which FB might like better.
What is the specific characteristic of these rotated images causing a problem and how do I work around it?
Turns out this is a legitimate Facebook bug. Kudos to them for responding and addressing it promptly.
https://developers.facebook.com/bugs/1080037355413437/
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.
My Boostrap framework is working fine on Chrome and Safari. It also is mostly on Explorer and Firefox. However, in Explorer and Firefox, a couple of images on interior pages appear to have an offset applied. The issue will be apparent when viewing the pages:
notagamebook.com/the-author-2
notagamebook.com/excerpts
I have been unable to find anyone else who has encountered the same issue. And I realize a manual fix won't be all that difficult, but I would like to keep the images in the framework and figure out what is happening in case it occurs again in the future.
EDIT
After attempting to fix this issue manually, I have realized it is NOT a Bootstrap issue. Firefox and Explorer are pushing the first piece of content following the page label to the right. It did so even when coding outside of the Bootstrap framework. I tried putting a piece of text as the first item and got the same result.
I've found the solution to this problem: There was a difference in the bottom margin being applied to the title in Explorer and Firefox, pushing the content to the right of the title div.
I've got a Wordpress site with some CSS3 rules applied to some images that rotate the images and have a hover effect on rollover too. Problems are showing up in Safari & Firefox when you hover on and then off these images and I can't seem to locate any similar issues by people on the Interwebs.
See http://tinyurl.com/3n2eude and hover on and then off the images (the slightly rotated ones):
Member name goes blurry and then back to normal (Firefox)
Member image border becomes jagged (Firefox)
A big black line displays to the side of the member images sometimes when you hover back and forth between two member images (Safari)
If I disable the transform:rotate rules, it's all fine. So seems to be an issue with that rule. Just can't work out how to get around it.
Anybody got some ideas on how I could get around these or what might be causing it?
Thanks for any ideas you might have!
Bit old of a question but that problem is related with rendering on browser (from what I understood). It cannot be fixed on CSS/HTML side. It must be fixed on user side.
Fix: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/
More information about problem: CSS3 rotate - rendering problems in Firefox and Safari
We have a website that currently serves drawings to users via the SVG Viewer plugin. We have one client that sees it through IE8. With IE8, when they do a Change Zoom Level on the browser to anything other then 100%, the viewer tries to occupy the new space and zooms correctly. However, when the user tries to manipulate the frames inside that bound the viewer (it's a frameset website with the viewer being in the center) the entire site hangs. IE8 also shows that it takes up CPU cycles on the client computer, so it's trying to do something but hitting a loop.
I don't think this is actually our code and might just be something with SVG and how IE8 handles plugins and it's zoom. Does anyone know if this is a real problem and if there's a good solution?
If you are referring to the Adobe SVG Viewer plug-in, then I recommend that you (ideally) get your clients to start using a web browser that supports SVG natively — i.e. Chrome, Safari, Firefox, Opera; even IE9 (to some extent) — or use a different shim like SVGWeb to provide SVG support for those users of older browsers who also have Flash installed.
I found out what the problem was. I thought it was the SVG viewer trying to do something with the frames, when it turned out that I was just setting the frameset's initial size to the clientHeight and clientWidth, and then subtracting something from the height. That subtraction was a toolbar based in the frameset and, when you change the zoom level in the browser, there's a lock up that can occur with you trying to pull a components size and the client's size. At least, this is what I was seeing.