Remove unnecessary translateZ(0) when doing scale() (#5473)

th-downstream
Nolan Lawson 7 years ago committed by Eugen Rochko
parent 2fa2051ecf
commit 1a8b2157d0

@ -68,7 +68,7 @@ export default class Upload extends ImmutablePureComponent {
<div className='compose-form__upload' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> <div className='compose-form__upload' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}> <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
{({ scale }) => ( {({ scale }) => (
<div className='compose-form__upload-thumbnail' style={{ transform: `translateZ(0) scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})` }}> <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})` }}>
<IconButton icon='times' title={intl.formatMessage(messages.undo)} size={36} onClick={this.handleUndoClick} /> <IconButton icon='times' title={intl.formatMessage(messages.undo)} size={36} onClick={this.handleUndoClick} />
<div className={classNames('compose-form__upload-description', { active })}> <div className={classNames('compose-form__upload-description', { active })}>

@ -47,7 +47,7 @@ class SensitiveButton extends React.PureComponent {
'compose-form__sensitive-button--visible': visible, 'compose-form__sensitive-button--visible': visible,
}); });
return ( return (
<div className={className} style={{ transform: `translateZ(0) scale(${scale})` }}> <div className={className} style={{ transform: `scale(${scale})` }}>
<IconButton <IconButton
className='compose-form__sensitive-button__icon' className='compose-form__sensitive-button__icon'
title={intl.formatMessage(messages.title)} title={intl.formatMessage(messages.title)}

@ -40,7 +40,7 @@ export default class UploadArea extends React.PureComponent {
{({ backgroundOpacity, backgroundScale }) => {({ backgroundOpacity, backgroundScale }) =>
<div className='upload-area' style={{ visibility: active ? 'visible' : 'hidden', opacity: backgroundOpacity }}> <div className='upload-area' style={{ visibility: active ? 'visible' : 'hidden', opacity: backgroundOpacity }}>
<div className='upload-area__drop'> <div className='upload-area__drop'>
<div className='upload-area__background' style={{ transform: `translateZ(0) scale(${backgroundScale})` }} /> <div className='upload-area__background' style={{ transform: `scale(${backgroundScale})` }} />
<div className='upload-area__content'><FormattedMessage id='upload_area.title' defaultMessage='Drag & drop to upload' /></div> <div className='upload-area__content'><FormattedMessage id='upload_area.title' defaultMessage='Drag & drop to upload' /></div>
</div> </div>
</div> </div>

@ -3008,21 +3008,21 @@ button.icon-button.active i.fa-retweet {
} }
.fa-search { .fa-search {
transform: translateZ(0) rotate(90deg); transform: rotate(90deg);
&.active { &.active {
pointer-events: none; pointer-events: none;
transform: translateZ(0) rotate(0deg); transform: rotate(0deg);
} }
} }
.fa-times-circle { .fa-times-circle {
top: 11px; top: 11px;
transform: translateZ(0) rotate(0deg); transform: rotate(0deg);
cursor: pointer; cursor: pointer;
&.active { &.active {
transform: translateZ(0) rotate(90deg); transform: rotate(90deg);
} }
&:hover { &:hover {

Loading…
Cancel
Save