Strange Scrollbars Around the Svg Background in Chrome

Chrome and SVG : unwanted scrollbars after zoomIn + zoomOut

This is a bug in the WebKit rendering engine, so the problem is reproducible in both Chrome and Safari. The bug has been fixed in Version 528+ on Nov 18, 2011, and I verified it is fixed in the most recent nightly build.

https://bugs.webkit.org/show_bug.cgi?id=43018

Hopefully that means the next major release of both Chrome and Safari will fix the problem.

Safari Scrollbars & SVG

You are getting a scrollbar in Safari because:

1. height="100%" on the object is making it as tall as the body, and
2. Because the <object> defaults to display:inline you get an additional baseline (4px-6px) below the object. 100% + anything is taller than the window, and thus a scrollbar shows.

If you can be clear about what you want the final presentation to be—specifically, what should the height be for your <object>—I can help you make it work cross-browser.

Most likely you want to a) set display:block on the <object> via CSS, and/or b) remove the height="100%" from the <object>. (If you want cross-browser height control, set the height via CSS, not presentational attributes.)

You can see an annotated example of my failing test at

http://phrogz.net/svg/svg_via_object.html

and the fixed version at

http://phrogz.net/svg/svg_via_object.xhtml

(The use of HTML4 versus XHTML is unrelated to the problem or fix.)

webkit-clip-path mysterious line in chrome when scrollbar present

You can hide this line by using the following snippet.

.container {  background: #ff0000;  width: 400px;  margin: 0 auto;}.block {  background: #fff;  height: 400px;  -webkit-clip-path: polygon(0px 20%, calc(100% + 1px) 0px, calc(100% + 1px) 100%, 0px 100%);    /** or this...   -webkit-clip-path: polygon(0px 20%, 101% 0px, 101% 100%, 0px 100%);  */}

<div class="container">  <div class="block"></div></div>

Google Chrome - SVG background transition not working good

OK ... it's in the transition. When those lines are commented out, it works without a transition, but without the jumpy sizing effect.

Changing the all in the transitions to opacity seems to work in Chrome, but I'm not sure this is the effect you want.

-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;

Unfortunately, my first attempt at a fix was to animate the background image and you cannot use transition on background-image; see the w3c list of animatable properties.

Strange Chrome background-image cut off

I confirm the bug and like randy I think this is a problem with chrome and not your code.
It seems the problem appear and disappear because of the width if the page, if I resize my window the problem appear and disappear.

After some trials and error it seems the problem come partially from the size td element that encapsulate your menubutton. After trying some things around I thing I found a workaround. Since you know both the size of the td element and the menubutton, you don't need an automatic margin. So:

.menubutton
{
margin:0px 24px;
margin-top:-10px;
background:url('../img/buttons/menureg.png');
width:102px;
height:32px;
display:block;
color:#6F6F6F;
font-size:16px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
padding-top:10px;
text-decoration:none;
}

Can you test on your side to see if it resolves the issue?

---

Related Topics