背景位置转换在Safari中不起作用

时间:2017-07-05 04:05:44

标签: css safari

我正在改变悬停时元素的背景位置,它在chrome上运行正常,但是当我在safari上尝试它时,背景会快速上下跳跃,我尝试应用我发现的一些修复一个谷歌搜索,它仍然无法正常工作,这里是代码(html,原始规则,过渡属性和:悬停规则) -

<div class="port-big">
  <a class="port-item campbell" href="http://www.campbellmgmt.com/" target="_blank">
    <div class="port-img"></div>
    <h3 class="port-title">Campbell Property Management</h3>
    <img class="port-logo" src="images/campbell-logo-white.png" />
    <p class="port-descr">Campbell Property Management was my largest project while I was at Juvo Web. The client was looking to completely update their website and
    add some new features. After extensive research on property and real estate UI/UX I designed the new front end and implemented it on their website.</p>
  </a>
</div>

.port-img {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-blend-mode: overlay;
  background-size: cover;
  background-position: center top;
  background-position-x: 0%;
  background-position-y: 0%;
}

.campbell .port-img {
  background-image: url(../../images/campbell-screenshot.png);
  background-color: #dd3a00;
}

.port-title, .port-descr, .port-logo, .port-img {
  -webkit-transition: all ease-in-out 0.4s,
                      background-position linear 24s;
  transition: all ease-in-out 0.4s,
              background-position linear 24s;
}

.port-big .port-item:hover .port-img {
  background-position: center bottom;
  background-position-x: 0%;
  background-position-y: 100%;
}

1 个答案:

答案 0 :(得分:2)

我找到了答案,当我将背景位置过渡分离为它自己的规则时,它工作正常,最终看起来像这样 -

#!/usr/bin/env python

import math

from PyQt4 import QtCore, QtGui
from PyQt4.QtGui import QGraphicsView, QGraphicsTextItem


class QEdgeGraphicItem(QtGui.QGraphicsItem):
    Type = QtGui.QGraphicsItem.UserType + 2

    def __init__(self, sourceNode, destNode, label=None):
        super(QEdgeGraphicItem, self).__init__()

        self.sourcePoint = QtCore.QPointF()
        self.destPoint = QtCore.QPointF()

        self.setAcceptedMouseButtons(QtCore.Qt.NoButton)
        self.setFlag(QtGui.QGraphicsItem.ItemIsMovable)
        self.setFlag(QtGui.QGraphicsItem.ItemSendsGeometryChanges)
        # self.setCacheMode(QtGui.QGraphicsItem.DeviceCoordinateCache)
        self.source = sourceNode
        self.dest = destNode

        self.label = QGraphicsTextItem("WHY IN THE HELL IS IT IN 0,0", self)
        self.label.setParentItem(self)
        self.label.setDefaultTextColor(QtCore.Qt.black)
        self.source.addEdge(self)
        self.dest.addEdge(self)
        self.adjust()

    def adjust(self):
        if not self.source or not self.dest:
            return

        line = QtCore.QLineF(self.mapFromItem(self.source, 0, 0),
                             self.mapFromItem(self.dest, 0, 0))
        self.prepareGeometryChange()
        self.sourcePoint = line.p1()
        self.destPoint = line.p2()

    def boundingRect(self):
        if not self.source or not self.dest:
            return QtCore.QRectF()
        extra = 2
        return QtCore.QRectF(self.sourcePoint,
                             QtCore.QSizeF(self.destPoint.x() - self.sourcePoint.x(),
                                           self.destPoint.y() - self.sourcePoint.y())).normalized().adjusted(-extra,
                                                                                                             -extra,
                                                                                                             extra,
                                                                                                             extra)
    def paint(self, painter, option, widget):
        if not self.source or not self.dest:
            return

        # Draw the line itself.
        line = QtCore.QLineF(self.sourcePoint, self.destPoint)

        if line.length() == 0.0:
            return

        painter.setPen(QtGui.QPen(QtCore.Qt.black, 1, QtCore.Qt.SolidLine,
                                  QtCore.Qt.RoundCap, QtCore.Qt.RoundJoin))
        painter.drawLine(line)

        painter.setBrush(QtCore.Qt.NoBrush)
        painter.setPen(QtCore.Qt.red)
        painter.drawRect(self.boundingRect())
        print "Edge:"+str(self.scenePos().x()) + " " + str(self.scenePos().y())


class QNodeGraphicItem(QtGui.QGraphicsItem):
    Type = QtGui.QGraphicsItem.UserType + 1

    def __init__(self, label):
        super(QNodeGraphicItem, self).__init__()

        # self.graph = graphWidget
        self.edgeList = []
        self.newPos = QtCore.QPointF()

        self.setFlag(QtGui.QGraphicsItem.ItemIsMovable)
        self.setFlag(QtGui.QGraphicsItem.ItemSendsGeometryChanges)
        # self.setCacheMode(QtGui.QGraphicsItem.DeviceCoordinateCache)
        # self.setZValue(1)
        self.size = 40
        self.border_width = 4

    def type(self):
        return QNodeGraphicItem.Type

    def addEdge(self, edge):
        self.edgeList.append(edge)
        edge.adjust()

    def boundingRect(self):
        x_coord = y_coord = (-1*(self.size/2)) - self.border_width
        width = height = self.size+23+self.border_width
        return QtCore.QRectF(x_coord, y_coord , width,
                             height)

    def paint(self, painter, option, widget):
        x_coord = y_coord = -(self.size / 2)
        width = height = self.size
        painter.save()

        painter.setBrush(QtGui.QBrush(QtGui.QColor(100, 0, 200, 127)))
        painter.setPen(QtCore.Qt.black)
        painter.drawEllipse(x_coord, y_coord, width, height)

        painter.restore()
        print "Node: " + str(self.scenePos().x()) + " " + str(self.scenePos().y())

    def itemChange(self, change, value):
        if change == QtGui.QGraphicsItem.ItemPositionHasChanged:
            for edge in self.edgeList:
                edge.adjust()
        return super(QNodeGraphicItem, self).itemChange(change, value)

    def mousePressEvent(self, event):
        self.update()
        super(QNodeGraphicItem, self).mousePressEvent(event)

    def mouseReleaseEvent(self, event):
        self.update()
        super(QNodeGraphicItem, self).mouseReleaseEvent(event)


if __name__ == '__main__':
    import sys

    app = QtGui.QApplication(sys.argv)
    QtCore.qsrand(QtCore.QTime(0, 0, 0).secsTo(QtCore.QTime.currentTime()))
    node1 = QNodeGraphicItem("Node1")
    node2 = QNodeGraphicItem("Node2")
    edge  = QEdgeGraphicItem(node1,node2)
    view = QGraphicsView()
    view.setCacheMode(QtGui.QGraphicsView.CacheBackground)
    view.setViewportUpdateMode(QtGui.QGraphicsView.BoundingRectViewportUpdate)
    view.setRenderHint(QtGui.QPainter.Antialiasing)
    view.setTransformationAnchor(QtGui.QGraphicsView.AnchorUnderMouse)
    view.setResizeAnchor(QtGui.QGraphicsView.AnchorViewCenter)

    view.scale(0.8, 0.8)
    view.setMinimumSize(400, 400)
    view.setWindowTitle("Example")
    scene = QtGui.QGraphicsScene(view)
    scene.setItemIndexMethod(QtGui.QGraphicsScene.NoIndex)
    scene.setSceneRect(-400, -400, 800, 800)
    view.setScene(scene)
    scene.addItem(node1)
    scene.addItem(node2)
    scene.addItem(edge)
    view.show()
    sys.exit(app.exec_())