In canvas, while setting textBaseline property to 'top', its rendering differently in chrome and firefox. In chrome, there is a gap between line and the text where as there is no gap in firefox.
Kindly refer this to view in your browser, any help would be thankful.
I also checked similar issue reported long-back. Is there any work-around in firefox to get it work fine?
I agree with the OP that this is an issue and it's peculiar to Firefox. Increasingly though, it seems that Firefox has adjusted the vertical offset overtime. It was once once about 4 pixels, then 3. Now, it is almost imperceptible. So, I agree with #Kaiido above. Use/set *object*.textBaseline="alphabetic"; I believe that this is consistent across browsers.
Related
I'm new to animating SVGs & I've come across a problem that only seems to happen in Firefox. I've created a animation here - http://codepen.io/iamali/pen/txvpo - of a sky scene. The sun should rotate & fade in & out.
It works fine in Chrome, but for some reason it appears to ignore the transform-origin value in Firefox and the sun goes AWOL. Does anyone know of such an issue in Firefox? Or could it be anything else? I've tried Google all sorts of terms but there doesn't seem to be much out there on it.
Thanks!
transform-origin with percentage units works from Firefox 43 onwards.
I have the following 2in x 1in barcode I am creating (Must be these dimensions). If the name is too long I want it to overflow:hidden. This works great in Firefox, but in Chrome it does not (See screenshots). I am guessing it has something to do with my CSS. I also verified both browsers are at default zoom.
Firefox:
Chrome:
Working demo:
http://blastohosting.com/barcode_overflow/
As you can tell in Chrome, you can see part of the words at the bottom not completely hidden.
This has to do with the rounding of the font-size.
Use an interger font-size and it will look the same in both browsers.
Ex: font-size: 13px;
EDIT: also I recommend using pixels for the dimensions, using inches may have different displays between browsers (I haven't spotted any difference but I prefer to use pixels in a pixel environment).
Chrome uses the WebKit rendering engine. Firefox uses the Gecko engine. Both interpret and display type slightly differently, as do the DirectX and Vega graphics engines used in IE9+ and Opera. You can't force browsers to render text identically.
For sub pixel problems in css
you can reset your css by http://developer.yahoo.com/yui/reset/
More information here Fonts looks different in Firefox and Chrome
This is the closest I've seen:
Changing font-size with jQuery css() function is crashing Chrome
But it didn't help.
Other threads mentioned that it's a bug in Webkit, but those were old threads and I couldn't find the bug report on Webkit's site.
The problem is that the header has a fixed width picture background and the navigation menu needs to stay within that width. I've since given up on HTML or CSS methods of accomplishing this. If you know of any, then please do share. So I've resorted to JavaScript (jQuery). And it works reasonably well, except in Chrome. The text actually increases in size for some odd reason.
Here's the simplified code in JSFiddle:
http://jsfiddle.net/alininja/j4jD9/12/
This gist of the code is this line:
$('body').css('font-size',(content_size-1)+'px');
For FireFox and Opera, the text size decreases to fit the header width, but not in Chrome.
If I run JSFiddle in Chrome everything works, but the funny behavior shows up on the actual website. This is happening on Chrome 17.0.963.56.
Thanks in advance!
If you want presentation consistency cross browser there is more involved than just setting font-size. You are assuming other font property defaults such as font-family are the same cross browser which they are not.
Use of a css reset will help
I have a problem with a Wordpress-run website: http://www.igorlipinski.com - Safari freezes and eventually crashes on iOS devices while using the zoom option, either double tap or pinch to zoom option. It looks and works very well on desktop browsers. I can't quite locate the problem... any thoughts? Thanks in advance!
UPDATE: I disabled javascript on my iPhone and the site worked beautifully, so at least I know where to look now! I would appreciate if anyone had a direct solution for this particular site, but I will work on it in the meantime.
I have faced similar kind of issue. Found issue with canvas drawing.
Basically there is one issue with canvas drawing. when we draw or erase something using canvas's methods like drawRect(), lineTo(), moveTo(), etc... it will create extra layer (like pixels on canvas) which causes memory leakage issue in safari browser for ipads/mobiles.
I am still looking for solution/alternative for memory leakage while using canvas.
Hope this will help you find any clue related to your project.
Hi I'm having some trouble with IE7 when doing a map.
I've made an xml and ajaxed it to grab points based on where the user is on the map.
It works well, and in FF, IE8 no problems when they click the points. On IE7 it firstly misses the cross at the top right, has some problems with the border (fixed that with some margin) and more importantly cuts out an portion of the image which I can't figure out.
I've attatched an image and what you see there is basically an a tag with a background image.
I've taken the title out as I thought that might cause it. Basically I'm stumpped any ideas.
Thanks
Richard
There seems to be a bug in Internet Explorer which has to do with how transparent PNGs are scaled when using the Zooming feature of the browser. It's difficult to reproduce because it's a local browser setting.
It happens even in maps.google.com. See the example below at 125% zoom, using Internet Explorer 8:
Is your zoom set to anything other than 100%?