html - Cannot override padding in print style when transition-duration is set -

-

i have peculiar problem seems affect chrome (tested in chromium 47.0.2526.73 on ubuntu, chrome 48.0.2564.82 m on windows, firefox 43.0.4 on ubuntu), , in actual print-preview (the problem not occur when emulating print media in developer tools).

i have been trying fix issue print styles in gitlab, in there undesirable gap on left-hand side of page, shown below.

excess margin in print preview on gitlab page

now, 1 expect easy fix. main container element has padding-left of 230px leave room sidebar, needs 0 when printing. however, cannot print style in place eliminates padding.

i have reduced down minimal test case, shown here. i'd use in-place snippet, doesn't work when try print-preview it. source of example follows:

<!doctype html> <html> <head> <title>print style problem demonstration</title> <style type="text/css" media="all"> .page-with-sidebar {   background: purple!important;   transition-duration: .3s; }  @media(min-width: 1199px) {   .page-sidebar-expanded {     padding-left: 230px;   } } </style> <style type="text/css" media="print"> .page-with-sidebar, .page-sidebar-expanded {    padding-left: 0!important;   transition-duration: 0s!important; } </style> </head> <body>  <p>i have no left padding.</p>  <div class="page-sidebar-expanded page-with-sidebar">   <p style="color: white;">i should have no left padding when printed</p> </div>  </body> </html>

in example, trying eliminate padding of purple p when printing setting padding-left: 0!important; in print style. have isolated problem transition-duration: .3s; style, , problem goes away if removed. however, setting transition-duration: 0s!important; not override it.

purple element unwanted padding in print preview

i have read this thread, relevant find, solutions described not appear work me (making transition screen-only, , adding other transition: none lines).

one further observation of interest the problem relies on @media(min-width: 1199px) rule. if removed, problem goes away.

none of factors i've identified make problem occur changeable me in gitlab, , if i'd love know causing behaviour.

am doing wrong or bug in chrome?

the main issue transition property, can write inside media check following css, have tested , working fine.

    <style type="text/css" media="all">         .page-with-sidebar {             background: purple!important;         }      @media(min-width: 1199px) {         .page-with-sidebar {             transition-duration: .3s;         }         .page-sidebar-expanded {             padding-left: 230px;         }     }     </style>     <style type="text/css" media="print">         .page-with-sidebar, .page-sidebar-expanded {              padding-left: 0!important;         }     </style>

Comments

Post a Comment

Popular posts from this blog

sql - VB.NET Operand type clash: date is incompatible with int error -

-
i trying display records table named staffpresentee database using clause... i using visual studio 2010... the table design follows- .......fieldname..................datatype........allownull 1......staff_id (fk).............numeric(18,0)......yes 2.......date........................date.............no 3......present.....................char(1)..........yes note type of 2nd field date , not datetime... i want display records table have today's date int 'date' field... current query is- cmd = new sqlclient.sqlcommand("select * staffpresentee date=" & date.now.date, cn) dr = cmd.executereader for dr = cmd.executereader error "operand type clash: date incompatible int" i tried select * staffpresentee query without clause runs correctly. try putting date value in sigle quotes maybe. cmd = new sqlclient.sqlcommand("select * staffpresentee date='" & _
Read more

SVG stroke-linecap doesn't work for circles in Firefox? -

-
i've got problem svg stroke-linecap attribute. i've got circular progress bar in angularjs , set outer circle (blue one) have rounded "ends". @ fiddle . <svg ... height="130" width="130"> <!-- ngif: background --> <circle ... ng-if="background" fill="#fff" class="ng-scope" stroke-width="13" stroke="#cc3399" r="57.5" cy="65" cx="65" stroke-linecap="round" /> <!-- end ngif: background --> <circle ... fill="none" stroke-dashoffset="36.12831551628261" stroke-dasharray="361.28315516282623" stroke-width="13" stroke="#432db3" stroke-linecap="round" r="57.5" cy="65" cx="65" transform="rotate(-89.9, 65, 65)" /> </svg> how can that?
Read more

python - TypeError: Scalar value for argument 'color' is not numeric in openCV -

-
here code im = cv2.imread('luffy.jpg') gray = cv2.cvtcolor(im,cv2.color_bgr2gray) ret,thresh = cv2.threshold(gray,127,255,0) contours,h = cv2.findcontours(thresh,cv2.retr_tree,cv2.chain_approx_simple) cnt in contours: moment = cv2.moments(cnt) c_y = moment['m10']/(moment['m00']+0.01) c_x = moment['m01']/(moment['m00']+0.01) centroid_color = im[c_x,c_y] centroid_color = np.array((centroid_color[0],centroid_color[1],centroid_color[2])) print type(centroid_color) cv2.fillpoly(im,cnt,centroid_color) i getting error on last line try , pass centroid_color color argument. <type 'numpy.ndarray'> , have been able pass data type cv2.fillpoly color in other instances, not sure why having problem here. fillpoly() expects iterable, i.e. put cnt in brackets. believe duplicate of https://stackoverflow.com/a/17582850/5818240 . moreover, centroid color variable contains strings. need convert them i
Read more