<html><head><meta http-equiv="Content-Type" content="text/html charset=utf-8"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class="">This is a well-known issue. Ideally outline size would be factored into visual overflow, but that’s a bit tricky because outline is weird and crosses between RenderObjects.<div class=""><br class=""></div><div class=""><a href="https://bugs.webkit.org/show_bug.cgi?id=106397" class="">https://bugs.webkit.org/show_bug.cgi?id=106397</a></div><div class=""><br class=""><div class=""><br class=""><div><blockquote type="cite" class=""><div class="">On Jul 6, 2015, at 9:26 PM, Kim, NamHoon <<a href="mailto:nakim@ea.com" class="">nakim@ea.com</a>> wrote:</div><br class="Apple-interchange-newline"><div class=""><div class="WordSection1" style="page: WordSection1; font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class="">Hi experts,<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class=""> </span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class="">While hacking composited layer in WebKit, I realized CSS outline style inflate size of all RenderLayers. Since WebKit has default css of 5px outline for focused element, focusing input in the below sample inflate the cyan box. This can reproduced in WK2 OSX port in r186227.<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class=""> </span></div><div style="margin: 0cm 0cm 0.0001pt 10pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Consolas;" class=""><style><o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt 10pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Consolas;" class="">.box {<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt 10pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Consolas;" class=""> position: fixed;<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt 10pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Consolas;" class=""> top: 50px;<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt 10pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Consolas;" class=""> width: 100px;<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt 10pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Consolas;" class=""> height: 30px;<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt 10pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Consolas;" class=""> border-radius: 10%;<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt 10pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Consolas;" class=""> background-color: cyan;<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt 10pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Consolas;" class="">}<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt 10pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Consolas;" class=""></style><o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt 10pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Consolas;" class=""> </span></div><div style="margin: 0cm 0cm 0.0001pt 10pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Consolas;" class=""><input type='text'><o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt 10pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Consolas;" class=""><div class='box'></div><o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class=""> </span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class="">Through investigation, I found `RenderView::m_maximalOutlineSize` value is set in the RenderElement::setStyle() function. And this cause inflation of layers in RenderLayer::localBoundingBox() function. Since setter of `m_maximalOutlineSize` scheduled rebuild of the whole composited layers, all layers inflated by the value.<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class=""> </span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class="">Honestly, I don’t know about this value’s purpose. But it seems weird to me that this value does not cleared in the RenderView even after outline style cleared. (i.e. loose focus of the input)<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class=""> </span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class="">And this behavior makes several problem in our ports, [EAWebKit][1]. Since we uses composited layers backed by DirectX, this makes paint call requests larger size than texture itself in TextureMapperTile::paint() function. This cause rendering of corrupted memory. Steps follow,<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class=""> </span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class="">a. layer inflated by maximalOutlineSize. Let 100x100 layer increased to 110x110.<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class="">b. texture increased in the TextureMapperTiledBackingStore::createOrDestroyTilesIfNeeded() to 110x110.<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class="">c. layer’s texture destroyed then reconstructed by display style change.<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class="">d. while reconstruct of the layer’s texture, this time texture created with the size of 100x100 instead of 110x110.<o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class="">e. then painting this texture in TextureMapperTile::paint() request 110x110 rect for 100x100 texture.</span></div></div></div></blockquote><div><br class=""></div>This sounds like a bug in your port.</div><div><br class=""><blockquote type="cite" class=""><div class="WordSection1" style="page: WordSection1; font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class=""><o:p class=""></o:p></span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span style="font-family: Calibri, sans-serif; font-size: 11pt;" class="">While step d. GraphicsLayerTextureMapper::m_needsDisplayRect intersected with TextureMapperTile::m_rect, makes texture smaller then layer’s size. On the other hand, TextureMapperTile::paint() call in the step e. request whole TextureMapperTile::m_rect for draw request.</span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class=""> </span></div><div style="margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10pt; font-family: 'Malgun Gothic';" class=""><span lang="EN-US" style="font-size: 11pt; font-family: Calibri, sans-serif;" class="">To escape this problem, I overridden default style of :focus to `outline: none`. I wonder better solution for this. Is it some bug of WebKit? Is there some proper way to handle this? If inflation of the layers inevitable, it seems reasonable shrunken back after outline style cleared.<o:p class=""></o:p></span></div></div></blockquote><br class=""></div><div>Simon</div><div><br class=""></div><br class=""></div></div></body></html>