As the question suggests, I am having an issue with all of the text on my page appearing differently in Microsoft Edge compared to Google Chrome.
However, I would like to keep / use the rendering shown in Edge.
Using JS and/or CSS, is there any way to use the styling in Edge (font family, size, etc.) and apply it in Chrome. I know it sounds silly, but the entire page from the description text to the fields appears far nicer in Edge, and more readable. So, if possible, I would love to somehow use the stying that Edge applies to the page.
The link to my page is: https://donorbox.org/youthminds.
I have included screenshots below of how it looks in Chrome and Edge.
https://i.imgur.com/Gjlefz2.png (Google Chrome) and https://i.imgur.com/qFRb9vH.png (Microsoft Edge).
Related
I've got a bit of an issue with SVG files now. I'm trying to make the logo on my site set to an SVG, and now that it's live, my friends can see it (mobile browsers, safari) but I'm on Iridium (Chrome) and don't see it. I've tried Chrome on mobile, I've tried Brave (which I believe is also based on Chrome) and neither have worked. IE and Firefox (Quantum) do display the file with no issues, but only part of it displays on any chrome-based browser.
Here's a screenshot of what I see on chrome:
https://i.gyazo.com/8912785d57756c5cda09c941f4fa3542.png
Here's a screenshot of what I should see (Firefox):
https://i.gyazo.com/57272d67a4406243f6ea1aeeb89d7138.png
Some extra details.
-The text part is an image, and so is the girl. The rectangle that does show in Chrome is an actual rectangle. Like, it was the shape path when exported from Photoshop.
-When I open the image in chrome (just the image, not embedded on the site) it shows up fine. I can play with dimensions, do whatever and everything works perfectly.
-The SVG size is all 100% everywhere, and the parent div is the size I need it to be, so that's not the problem. I'm not that new to embedding SVGs I use a number of them on the site as well.
-There's no error in the browser console, not that I'm sure it would make one either way.
EDIT: Included code:
https://hastebin.com/fugodijiwa.xml
I'm using a Google CSE on http://afv.com and the results page is so wonky for Firefox and Safari. Here's what I see:
Chrome (looks perfect):
Firefox (magnifying glass gone in blue button, text falls out bottom of input field):
Safari (input field far too wide, sends blue button off edge of page):
I've mucked around with the style sheet Google gives me, to try to override some styles and standardize the output, but I can't see why it's so weird across browsers. Any thoughts? I know using a CSE is a bit of a hack and I'm having to shoehorn it into my layout, but these pictures show some incorrect layouts (or in the case of Safari, wildly incorrect), beyond just minor formatting issues.
This is probably because some of your own css is influencing the search button (e.g. a library like bootstrap or a css reset). If you try a search button without any additional styles - e.g. this one:
enter code herehttp://jsfiddle.net/buQL3/1/show_html/
it should render correctly (renders well for me in OS X 10.8.5 latest Chrome, Firefox 24 and Safari 6.0.5).
I've noticed some strange behavior with both Chrome and Safari on my Mac:
Mountain Lion
Safari 6.0 (8536.25)
Chrome 21.0.1180.89
The page is a simple fixed div with some text in it, I added a second div that does a simple CSS translation over 5 seconds so you can easily see the difference. My web app is using CSS transitions to show and hide portions, and while it was doing this large portions of the screen seemed to shift.
I've placed example code and a .mov file out on a server so hopefully you will see the same issue:
http://physicaltable.com/index.html and http://physicaltable.com/CSS_JIGGLE_TEST_2.mov
The strange bolding doesn't occur in Chrome on Windows 7, nor does it happen on the iPad 2 (v5.1.1)
Has anyone else seen this type of issue?
I realize this isn't much of an answer, but I've found that it's mostly because of the rendering of the elements. If the element needs to use hardware or any other type of graphics rendering, it basically takes an image of the text, adjusts it, then rerenders the text (if it can).
The "taking a picture" is where the boldness is lost, since the browser/display/something is adding the flair that makes the text look good. Of course it doesn't look that good, but that's just me.
I've noticed with different colors other than all white/black, it can behave differently. I'm hoping things will get smoothed out as browsers and rendering advances.
I found solution for this bug
its enough simply force your browser to rerender that at moment move is stopped
E.g.
$("your_element_selector").css("color", "color");
where color can be even same color as your text has
I've been playing with CSS3 transforms- rotations- and embedded fonts.
Some fonts completely disappear in Chrome when I apply a rotation.
Does anyone know why chrome blows this up?
What makes a font susceptible to this behavior?
Screenshot
So maybe y'all don't think I'm crazy- The text only shows up (kind of) after I try selecting it.
You weren't including the font correctly, try it like this:
http://jsfiddle.net/DFmtJ/1/
(tested on windows XP, Chrome 11.0.696.68 and 13.0.782.220)
------Edit--------
Cried wolf, the font that was being loaded was another one :/, though it is working for me on Chrome as in your first demo.
I have a simple html page in an iframe that I am trying to scale with an html5 input range slider. it creates a white border inside the iframe, what looks to be a doubling side effect.
It works perfect in chrome(6.0.472.59 mac), but not in safari (5.0.1 mac).
here is a link to live demo - http://dl.dropbox.com/u/1031653/safari-bug.html
Any sort of suggestion on why this may be happening? hardcore hacks are fine if need be.
This appears to be a Safari bug. I would recommend reporting it at https://bugs.webkit.org/
I'm seeing this bug in Chrome as well (version 11.x.x)
One solution is to go into the IFRAME's document (assuming you have access) and set the size there. Something like this:
$('iframe').contents().find('body').css('-webkit-transform', 'scale(0.5)');