Памылка з пераўтварэннем: маштаб і перапаўнення: схаваны ў Chrome

Праца з CSS3 уласцівасцяў пераўтварэнні: маштаб , я знайшоў цікавае пытанне. Я хацеў зрабіць невялікі эфект маштабавання малюнкаў. Але калі я выкарыстаў для бацькоўскага DIV перапаўненне: схаваны і мяжа радыусу , дзіця дзіў падоўжыў залімітавае бацькоўскага спраў.

<�Моцны> Update:

Праблема не вырашаецца. Калі дадаць пераход , па-ранейшаму не працуе. Я паспрабаваў вырашыць гэтую праблему, але без поспеху.

Here is a demo

49
Не ўпэўнены, што мяжы: 1px цвёрдых празрысты , але Transform: translateZ (0); , каб .wrap працаваў для мяне. jsfiddle.net/locateganesh/qWdf6/754
дададзена аўтар locateganesh, крыніца
Ён выдатна працуе для мяне: jsfiddle.net/qWdf6/1 (я змяніў карціну, таму што мой проксі-сервер гэта блакуе, і дадаў мяжы, каб убачыць, што дзеецца)
дададзена аўтар Andrea Ligios, крыніца
Ён працуе , таму што вы дадалі межы . Я магу пацвердзіць, што без мяжы гэтага парушаецца ў Chrome 26 на Windows, і правільна на Firefox 19 (для параўнання). Даданне мяжы: 1px цвёрдых празрыстых; , як абыходны шлях фіксуе хром
дададзена аўтар andyb, крыніца
Я абнавіў свой адказ з больш падрабязнай інфармацыяй пра другую праблеме, але няма абыходнага шляху яшчэ - гэта яшчэ адна памылкі Chrome.
дададзена аўтар andyb, крыніца
Калі ласка, дадайце каментар да адказу, калі вы адмяніце прыняць яго! Я не быў упэўнены, чаму мой адказ быў ня-прынята, пакуль я не бачыў абнаўлення на сваё пытанне. Не маглі б вы стварыць абноўленую дэма-версію гэтай праблемы?
дададзена аўтар andyb, крыніца
дададзена аўтар andyb, крыніца
Андрэа, дзякуй. Ён выдатна працуе, але толькі з межамі уласнасці. Я змяніў свой прыклад, і змяніў межы-колер празрыстым. Ён па-ранейшаму працуе. Дзякуючы.
дададзена аўтар Jake Blues, крыніца
пазіцыя: адносная; г-індэкс: 10 .... гэта адказ ён вырашыць маю праблему ... ДАРЭЧЫ светлячок не мае гэтую памылку ...
дададзена аўтар J.Tural, крыніца
Thks @locateganesh! Гэта працуе для мяне Transform: translateZ (0); !
дададзена аўтар Ivelfan, крыніца

11 адказы

Празрыстая мяжа не працавала для мяне, але, каб змяніць Z-індэкс .wrap DIV і імідж працаваў (у маім выпадку, малюнак на самай справе відэа)

Вось CSS:

.videoContainer{
    overflow: hidden;
    z-index: 10;
}

video{
    margin-left: -55%;
    transform: scale(-1,1);
    -webkit-transform: scale(-1,1);
    -moz-transform: scale(-1,1);
    z-index: 0;
}

Заўвага: гл Jake Blues каментар ніжэй адносна неабходнасці пазіцыянуе элемент для ўключэння Z-індэкса, каб працаваць належным чынам.

27
дададзена
Гэта, здаецца, вырашыць праблему з элементамі крывацёку з элемента з перапаўненне: схаваны і мяжа радыусу .
дададзена аўтар Thasmo, крыніца
Падобна на тое, што рашэнне. Я не думаю, што гэта неабходна, каб дадаць такі экстрэмальны вялікі Z-індэкс, і ў вашым прыкладзе г-індэкс не працуе, таму, што г-індэкс працуе толькі на размешчаных элементах (пазіцыя: абсалютная;, палажэнні: адносным; або становішча: фіксаваны;) кансорцыума W3C . Я абнавіў свой прыклад, каб пасля года гэтае пытанне было вырашана канчаткова :) jsfiddle.net/qWdf6/136
дададзена аўтар Jake Blues, крыніца
Тое ж самае тут - мяжа не працавала, г-індэкс працы
дададзена аўтар Pavle Gartner, крыніца
Дзякуй за заўвагі, я змяніў свой каментар адпаведна, але ў маім выпадку празрыстая мяжа па-ранейшаму не працуе.
дададзена аўтар Ken, крыніца

transform: translateZ(0); on the wrap element did the trick for me.

См прадукцыйнасць CSS ў адносінах да translateZ (0) для атрымання дадатковай інфармацыі аб гэтай тэхніцы.

23
дададзена
Ваша рашэнне працаваў для мяне. Дзякуючы, Вы можаце змяніць свой код з пераўтварэнне (translateZ (0)) у пераўтварэнне: translateZ (0);
дададзена аўтар locateganesh, крыніца
адрэдагаваныя дзякуй за ўказанне, што з
дададзена аўтар lefoy, крыніца
нарэшце, гэта адзін працаваў, ён прымушаў мяне з розуму дзякуй
дададзена аўтар user1435897, крыніца

Гэта вядомая памылка ў Webkit на аснове браўзэраў - гл # 62363 . Вы можаце дадаць мяжы: 1px цвёрдых празрысты у свой .wrap клас, каб абыйсці гэтую праблему.

Для атрымання абноўленага патрабаванні, дадаўшы, пераход да элемента з кодам <> межы радыусу , гэта іншая вядомая Chomre/Webkit памылка # 157218 . Выбачайце, але не вядома наогул абыходны шлях да гэтага часу, хоць адзін каментар на тым, што памылка кажа, што з дапамогай хром://сцягі і выкарыстоўваючы - ігнараваць-гПа-чорны спіс сцяг фіксуе яго у Chrome 29 (які проста націсніце на канале распрацоўшчыкаў Chrome сёння).

19
дададзена
Няма праблем! Кожны павінен пачаць з першым пытаннем! Я пагляджу, ці змагу я паглядзець на абноўленую дэма.
дададзена аўтар andyb, крыніца
Прабачце. Гэта маё першае пытанне на StackOverflow. Вы мелі рацыю, але я думаю, што гэтая праблема не вырашана да канца. Калі дадаць «пераход», дзіця дзіў яшчэ працягваецца залімітавы бацькоўскімі справы. Калі гэтая памылка не мае рашэнні, я прымаю ваш адказ з задавальненнем. )
дададзена аўтар Jake Blues, крыніца
Дзякуй за адказ)
дададзена аўтар Jake Blues, крыніца

Абодва шляхі вырашэння дадзенага эмітэнта выдатна працавалі:

    <�Літый> <�р> Дадайце наступны радок у бацькоўскай абалонкі ( Z-індэкс: 0 не з'яўляецца неабходным для самога выявы): становішча: адносная; г-індэкс: 10 </р>
  1. Або дадаць Transform: translateZ (0); бацькоўскай абгорткі (з адпаведнымі прэфіксамі для лепшай падтрымкі браўзэра)

15
дададзена
пазіцыя: адносная; г-індэкс: 10 .... гэта адказ ён вырашыць маю праблему ... вялікі дзякуй.
дададзена аўтар J.Tural, крыніца
мой +1 толькі для г-індэкса на абгортцы. translateZ() можа выклікаць праблемы з прадукцыйнасцю.
дададзена аўтар spikyjt, крыніца
І мае 100% падтрымкі браўзэра эфіру
дададзена аўтар Mike Shema, крыніца

Гэта адбываецца з-за скампанаваныя пластамі не подрезанных іх бацькоўскіх пластамі. Так што часам вам трэба прынесці аднаму з бацькоў з перапаўненне: схаваны на свой уласны композитинга пласт, таму ён можа ўжыць перапаўнення: схаваны правільна.

Такім чынам, вы павінны дадаць ўласцівасць CSS пераўтварэнне: translateZ (0) на бацькоўскі элемент вашага ператворанага элемента.

/* add to parent so it is composited on its own layer before rendering */
.parent-of-transformed-element {
     -webkit-transform:translateZ(0);
     transform:translateZ(0);
}

Тады перапаўненне: схаваны будзе працаваць з-за наяўнасці ператворанага элемента быць скампанаваныя на сваім уласным пласце рэндэрынгу, як і яго трансфармаванай дзіцяці.

Выпрабавана на апошніх прылады Safari і Chrome на прашыўку і якія не з'яўляюцца IOS

9
дададзена

Вось Рашэнне .

<�Моцны> HTML-код:

<div class="wrap">
    <div class="image"></div>
</div>

<�Моцны> CSS-:

.wrap{
    width: 400px;
    height: 260px;
    overflow: hidden;
    border-radius: 15px;
    border:1px solid transparent;
}
div.image{
    background: url(http://blog.dothegreenthing.com/wp-content/uploads/2012/10/take-a-smile.jpg) no-repeat;
    width: 400px;
    height: 260px;


}
div.image:hover{
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    cursor: pointer;
    border:1px solid transparent;
}

Хром неабходны празрысты межы навакольнае акно. Спадзяюся, што гэта дапамагае.

2
дададзена
Дзякуй. Гэта досыць дадаць мяжу толькі .wrap DIV;)
дададзена аўтар Jake Blues, крыніца
Эй, я адказаў першае, калі я быў заняты вырашэннем пытання і пасля размяшчэння бачыў усё каментары аб мяжы. Nevermind, адбываецца ў Stackoverflow, 5-10 другая затрымка будзе атрымаць больш і больш рашэнняў прыйдзе. Маё дрэннае, проста не мог зрабіць гэта ў патрэбны час. Выдатна ведаць, што вы атрымалі сваё рашэнне. Прывітання. Гоча аб абгортачнай справах - @JakeBlues
дададзена аўтар Nitesh, крыніца
Прахладны трук! Дзякуй! Але калі малюнак мае становішча "абсалютны", то ён не працуе. :( У больш новых версіях Chrome (v32) празрыстая мяжа таксама не патрэбна.
дададзена аўтар Benny Neugebauer, крыніца

Ну ... спрабуеце знайсці абыходны шлях выявіў, што

-webkit-appearance: button; 

fixed this behavior, but has some undesirable side effects if the element isn´t actually a button, like borders behaving wierd, but, replacing with <button> in my case kept the scaled content within its bounds.

1
дададзена

Як ні дзіўна, я проста сутыкнуўся з гэтай праблемай пасля абнаўлення Chrome 65, і для мяне дадання волі, змена: пераўтварэнне; стылях IFRAME зрабіў трук.

1
дададзена

У мяне была аналагічная праблема з апошняй версіяй Chrome 65. У мяне ёсць відэа маштабуецца плавае фрэйм ​​больш з дапамогай пераўтварэння: маштабу() у DIV, і на апошнюю версію Chrome, ён больш не быў замаскіравана па баках і выскокваюць з кантэйнера, нават з пералівам: схаваны;

Хоць translateZ накшталт дапамагло, гэта было толькі тады, калі я выкарыстаў translateX на аднаго з бацькоў, а не зрабіў гэта маскіраваць шырыню правільна:

 transform:translateX(0);
1
дададзена
Гэта рашэнне працуе для мяне ў выпадку абсалютна пазіцыянаваць даччынага элемента, які быў ператвораны. Даданне пераўтварэнне: translateX (0) на бацькоўскі элемент зрабіў даччыны элемент «паслухмянымі» бацькам elements ' перапаўненне: схаваны , які ён не рабіў раней. Я мяркую, што гэта ідзе ўніз да таго, што новы кампазіцыйны пласт ствараецца бацькоўскі элемент (які змяшчае даччыны элемент), а не даччыны элемент, які мае свой пласт «па-за» з бацькоў.
дададзена аўтар Chri.s, крыніца

Я быў пасля гэтага на працягу доўгага часу і адзінае, што працаваў для мяне гэта круціцца (0.1deg) translateZ (0) . Так што калі вы маштабаванне элемента

.something:hover img{

    -webkit-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -moz-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -o-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    transform: scale(1.1) rotate(0.1deg) translateZ(0);

}

без павароту выпраўленне не працуе на маім канцы.

Калі дадаць пераўтварэнне ў ЛЮБЫЯ IMG з бацькоў (напрыклад, круціць кантэйнер, у якім малюнак), вам трэба дадаць той жа фікс да элемента, напрыклад,

.something_parent{
    transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -webkit-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -mos-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -o-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
}
0
дададзена

Памылка ўсё яшчэ існуе ў Webkit браўзэраў (Safari і Chrome пад IOS), калі маска маштабуецца. І тады ўсё вышэй абыходныя шляхі не працуюць. Але выкарыстанне нестандартнага CSS ўласцівасці -webkit-Mask- каробкавай малюнак дапамагае для маштабуюцца масак, а таксама.

0
дададзена